<template>
	<view class="page">
		<!-- 基地名称 ——start -->
		<view class="head">
			<view class="text" style="font-size: 35rpx;">当前鸽棚：</view>
			<view class="title">
				<u-icon name="home-fill" color='#B23AEE'size="20"></u-icon>
				<picker class="itemPicker" @change="devomberChange" :value="devomberIndex" :range="devomberArray">
					<view class="uni-input">{{devomberArray[devomberIndex]}}</view>
				</picker>
			</view>
			<button :hairline="true" size="mini" class="button" @click="toCage()">
				<text style="color: #FFFFFF;"> 查看鸽笼</text>
				<u-icon name="arrow-right" color="#D1D1D1"></u-icon>
			</button>
		</view>
		<!-- 基地名称 ——end -->
		<!-- 基地天气 ——start-->
		<view class="weather">
			<view class="iconfont icon-taiyang" style="color:#FFD700;margin-right: 10rpx;"></view>
			<text>晴，东北风，16°</text>
		</view>
		<!-- 基地天气 ——end-->
		<!-- 数据可视化图表 ——start -->
		<!-- 基地异常数据 ——start -->
		<view class="content" style="height: 500rpx;" >
			<view class="head">
				<view class="title">
					<view class="iconfont icon-yichang" style="color: #EE4000;margin-right: 10rpx;"></view>
					<text style="height: 100%;">鸽棚异常鸽笼</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :chartData="arcbarData" />
			</view>
		</view>
		<!-- 基地异常数据 ——end -->
		<!-- 基地生产情况 ——start-->
<!-- 		<view class="content" style="height: 600rpx;">
			<view class="view_item">
				<view class="head">
					<view class="title">
						<view class="iconfont icon-shuju" style="color: #218868;margin-right: 10rpx;"></view>
						<text style="height: 100%;">鸽棚生产情况</text>
					</view>
				</view>
				<view class="progress_circle">
					<view v-for="(item,index) in circleData" :key="index" :class="['progress_block','block_'+index]">
						<view class="name">{{item.series[0].name}}</view>
						<view class="value">{{item.series[0].value}}</view>
						<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
							<qiun-data-charts type="arcbar" :chartData="item" :canvasId="'four_a_'+index"
								:canvas2d="isCanvas2d" :resshow="delayload"
								:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
						</view>
						<view class="planet">
							<view class="planet_shadow"></view>
							<view class="crater1"></view>
							<view class="crater2"></view>
							<view class="crater3"></view>
							<view class="crater4"></view>
						</view>
						<view class="star" :class="['star'+index]"></view>
						<view class="star pink" :class="['star'+index]"></view>
						<view class="star blue" :class="['star'+index]"></view>
						<view class="star yellow" :class="['star'+index]"></view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="content" style="height: 500rpx;">
			<view class="head">
				<view class="title">
					<u-icon name="share" color="#218868" size="20" bold></u-icon>
					<text style="height: 100%;">鸽棚生产情况</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="chartData" />
			</view>
		</view>
		<!-- 基地生产情况 ——end-->
		<view class="content" @click="interBase">
			<view class="head">
				<view class="title">
					<u-icon name="share" color="#218868" size="20" bold></u-icon>
					<text style="height: 100%;">上月销量比例</text>
				</view>
				<button class="btn">查看本年</button>
				<!-- <u-button type="primary" :plain="true" text="查看本年" :custom-style="uButtontyle"></u-button> -->
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :chartData="ringChartData" background="none" />
			</view>
		</view>
		<view class="content" style="height: 700rpx;margin-bottom: 30rpx;" >
			<view class="head">
				<view class="title">
					<u-icon name="share" color="#218868" size="20" bold></u-icon>
					<text style="height: 100%;">本年销量走势</text>
				</view>
				<button class="btn">查看上一年</button>
				<!-- <u-button type="primary" :plain="true" text="查看本年" :custom-style="uButtontyle"></u-button> -->
			</view>
			<view class="charts-box" style="height: 500rpx">
				<qiun-data-charts type="line" :chartData="lineChartData" />
			</view>
		</view>
		<!-- 数据可视化图表——end -->
	</view>
</template>
<script>
	import {
		myRequest
	} from "../../util/api.js"
	export default {
		name: 'devomber',
		created() {
			this.getDevomerList()
		},
		data() {
			return {
				devomberArray: [],
				devomberIndex: 0,
				arcbarData: {
					series: [{
						"name": "异常率",
						"data": 0.5,
						"color": "#EE4000"
					}]
				},

				circleData: [{
						"series": [{
							"color": "#fff",
							"data": 0.224,
							"precent": "22.4%",
							"index": 0,
							"legendShape": "circle",
							"name": "肉鸽",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "12786",
							"backgroundColor": "#00AEF9"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.3717,
							"precent": "37.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "光蛋",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "1096",
							"backgroundColor": "#F55676"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.0017,
							"precent": "0.17%",
							"index": 0,
							"legendShape": "circle",
							"name": "鸽粪",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "147604",
							"backgroundColor": "#FAB215"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": 0.6321,
							"precent": "63.21%",
							"index": 0,
							"legendShape": "circle",
							"name": "残鸽",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							"value": "173",
							"backgroundColor": "#2EC693"
						}]
					}
				],
				ringChartData: {
					categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
					series: [{
						name: "上月产出比例",
						data: [{
								"name": "肉鸽",
								"value": 50
							},
							{
								"name": "光蛋",
								"value": 30
							},
							{
								"name": "鸽粪",
								"value": 20
							},
							{
								"name": "残鸽",
								"value": 18
							}
						]
					}],
					dataPointShapeType: '空心',
					ringWidth: 20
				},
				chartData: {
					categories: ["肉鸽", "光蛋", "鸽粪", "残鸽"],
					series: [{
						name: "鸽棚生成情况",
						data: [35, 8, 25, 37]
					}]
				},
				lineChartData: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "整体",
							// stack: '总量', //去除，否则数据差值较大时会出现异常
							data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130],
						},
						{
							name: "异常鸽",
							// stack: '总量', //去除，否则数据差值较大时会出现异常
							data: [0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0],
						},
						{
							name: "残次品",
							// stack: '总量',
							data: [0, 0, 0, 0, 0, 30, 5, 0, 0, 0, 0, 0],
						},
						{
							name: "鸽蛋",
							// stack: '总量',
							data: [0, 0, 0, 0, 60, 40, 0, 70, 0, 0, 0, 0],
						},
						{
							name: "鸽粪",
							// stack: '总量',
							data: [0, 0, 0, 0, 80, 0, 0, 80, 0, 0, 0, 0],
						},
						{
							name: "肉鸽",
							// stack: '总量',
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						}
					]
				}
			}
		},
		methods: {
			toCage() {
				uni.navigateTo({
				    url: '../../page_cage/cage/cage'
				});
			},
			async getDevomerList() {
				let option = {
					url: `http://39.99.247.58:9802/breed/dovecote/list/1/100`,
					// header: {
					// 	token: ''
					// }
				}
				option.data = {
					baseId: 0
				}
				option.data.baseId = uni.getStorageSync('id')
				console.log('参数',option)
				// option.header.token = uni.getStorageSync('token')
				let {data} = await myRequest(option);
				if (data.statusCode == 20000) {
					console.log('获取数据成功')
					console.log(data)
					data.data.records.forEach((item,index) => {
						this.devomberArray.push(item.dovecoteNumber)
					})
					console.log(this.devomberArray)
					uni.setStorageSync('devomber',this.devomberArray[0])
				}
				
			},
			devomberChange(e) {
				console.log('改变',e);
				this.devomberIndex = e.detail.value;
				uni.setStorageSync('devomber',this.devomberArray[this.devomberIndex])
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.page {
		background-color: #F0F0F0;
		height: 100%;
		width: 100%;

		.head {
			display: flex;
			// background-color: #FFFFFF;
			height: 100rpx;
			padding-left: 20rpx;
			align-items: center;
			// justify-content: center;
			font-size: 38rpx;
			font-weight: 700;
			line-height: 80rpx;
			.text {
				flex: 2;
			}
			.button {
				flex: 3;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 20rpx;
				padding: 0 0 0 5rpx !important;
				width: 180rpx;
				font-size: 28rpx;
				letter-spacing: 3rpx;
				background-color: #23b8ff;
			}
			.title {
				flex: 3;
				display: flex;
				
				// margin: 0 auto;
			}

		}

		.weather {
			height: 100rpx;
			margin: 10rpx 20rpx 0 20rpx;
			padding-left: 20rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			display: flex;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 100rpx;
			letter-spacing: 2rpx;
		}

		.content {
			display: flex;
			flex-flow: column wrap;
			margin: 30rpx 20rpx 0 20rpx;
			padding: 10rpx;
			height: 500rpx;
			background-color: #FFFFFF;
			box-shadow: 0 0 8rpx rgba(0, 0.5, 0.5, 0.2);
			border-radius: 15rpx;

			.head {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;

				.title {
					flex: 6;
					display: flex;
					height: 100rpx;
					padding: 20rpx;
					// text-align: center;
					font-size: 36rpx;
					font-weight: 700;
					line-height: 60rpx;
					border-bottom: 2rpx solid #D9D9D9;
				}

				.btn {
					flex: 2;
					position: absolute;
					right: 20rpx;
					padding: 0 0 0 5rpx !important;
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 3rpx;
					background-color: #23b8ff;
					color: #FFFFFF;
					// opacity: 0.8 //修改透明度

				}
			}

			.charts-box {
				padding-top: 30rpx;
				width: 650rpx;
				height: 380rpx;
			}

			.progress_circle {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				height: 450rpx;

				.progress_block {
					width: 45%;
					border-radius: 20rpx;
					height: 180rpx;
					position: relative;
					overflow: hidden;

					.name {
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 20rpx;
						left: 10rpx;
						max-width: 144rpx;
					}

					.value {
						color: #fff;
						font-size: 40rpx;
						position: absolute;
						top: 64rpx;
						left: 10rpx;
						max-width: 144rpx;
					}

					.circle {
						position: absolute;
						right: 8rpx;
						top: 16rpx;
					}

					.arcbar {
						position: absolute;
						right: -4rpx;
						top: 8rpx;
					}
				}

				.block_0 {
					background-color: #0FC3FF;
				}

				.block_1 {
					background-color: #FF6B8B;
				}

				.block_2 {
					background-color: #FFCB1D;
				}

				.block_3 {
					background-color: #3BDCAA;
				}
			}
		}
	}
</style>
